<template>
  <div>
    <div class="exp" style="paddingbottom: 30px">
      <div v-for="(item, index) in myexpList" :key="index">
        <Expitem
          :expinfo="item"
          @changeItem="changeItem"
          @hangemyexpList="changemyexpList"
          :myIndex="index"
          :showDel="showDel == true ? true : false"
        ></Expitem>
      </div>
      <div class="moreBtn" v-if="!isMy" @click="more">
        查看更多<i class="el-icon-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import Expitem from "../components/Expitem.vue";
export default {
  props: ["expList", "isMy", "showDel"],
  components: {
    Expitem,
  },
  data() {
    return {
      myexpList: [],
    };
  },
  mounted() {
    // this.myexpList = this.$store.state.exp.myexpList;
    //若没有传递myexpList就进行经验推荐
    // console.log(this.myexpList)
    let arr = [];
    setTimeout(() => {
      this.myexpList = this.expList
        ? JSON.parse(JSON.stringify(this.expList))
        : arr;
      if (this.myexpList === arr && this.expList == undefined) {
        this.$axios({
          url: "/experience/recommend",
          method: "post",
        }).then((res) => {
          // console.log(res);
          if (res.code == "200") {
            this.myexpList = res.data;
          }
        });
      }
    }, 1000);
  },
  methods: {
    changeItem(obj) {
      //obj格式{id:1,key:1,value:1}
      // console.log(obj);
      if (!this.$getStorage("userinfo")) {
        this.$router.push("/main/login");
        return;
      }
      //增加浏览量
      if (obj.key == "isZhangkai" && obj.value == true) {
        this.addView(obj.id);
      }

      this.myexpList.forEach((item, index) => {
        if (item.id == obj.id) {
          //点赞
          if (obj.key == "isLike") {
            this.setLike(obj.id, item[obj.key]).then((res) => {
              console.log(res);
              if (res.code == "200") {
                item.isLike = !item.isLike;
                item.likeNum = res.data.likeNum;
              }
            });
          } else if (obj.key == "isShouCang") {
            //收藏
            let allData = {
              targetId: item.id,
              status: item.isCollection == false ? 1 : -1,
              type: 4,
            };
            this.$store.dispatch("collection", allData).then((res) => {
              item.isCollection = !item.isCollection;
            });
          } else if (obj.key == "isShowCom") {
            item.remarkPage = obj.page;
            //查询评论
            this.selectRemark(obj.id, obj.page).then((res) => {
              console.log(res);
              if (res.code == "200") {
                //显示或隐藏
                item.isShowCom = obj.value ? obj.value : !item.isShowCom;
                //生成评论数组
                let arr = res.data.map((item) => ({
                  ...item,
                  isShowRemark: false,
                  inputRemark: false,
                }));
                //追加
                let newArr = arr;
                //赋值
                this.$set(this.myexpList, index, {
                  ...item,
                  remark: newArr,
                  count: res.count,
                  remarkNum: res.count,
                });
              }
            });
          } else if (obj.key == "moreRemark") {
            item.remarkPage = obj.page;
            //查询评论
            this.selectRemark(obj.id, obj.page).then((res) => {
              console.log(res);
              if (res.code == "200") {
                //显示或隐藏
                item.isShowCom = obj.value ? obj.value : !item.isShowCom;
                //生成评论数组
                let arr = res.data.map((item) => ({
                  ...item,
                  isShowRemark: false,
                  inputRemark: false,
                }));
                //追加
                let newArr = item.remark ? [...item.remark, ...arr] : arr;
                //赋值
                this.$set(this.myexpList, index, {
                  ...item,
                  remark: newArr,
                  count: res.count,
                });
              }
            });
          } else if (obj.key == "showRemark") {
            //展示回复输入框
            let arr = item.remark.map((item2) => {
              if (item2.remarkId == obj.remarkId) {
                item2.inputRemark = !item2.inputRemark;
              } else {
                item2.inputRemark = false;
              }
              return item2;
            });
            //修改
            this.$set(this.myexpList, index, { ...item, remark: arr });
          } else if (obj.key == "openRemark") {
            //展示二级回复
            let arr = item.remark.map((item2) => {
              if (item2.remarkId == obj.remarkId) {
                item2.isShowRemark = !item2.isShowRemark;
              } else {
                item2.isShowRemark = false;
              }
              return item2;
            });

            this.$set(this.myexpList, index, { ...item, remark: arr });
          } else {
            item[obj.key] = obj.value;
            this.$set(this.myexpList, index, item);
          }
        }
      });
    },
    //点赞
    async setLike(id, isLike) {
      if (!this.$getStorage("userinfo")) {
        this.$router.push("/main/login");
      } else {
        return await this.$axios({
          url: "/experience/likeOrUnlike",
          method: "post",
          data: this.$qs.stringify({
            experienceId: id,
            status: !isLike ? 1 : 0,
            userId: this.$getStorage("userinfo").id,
          }),
        });
      }
    },
    //查询评论
    async selectRemark(id, page) {
      return await this.$axios({
        url: "/remark/select",
        method: "post",
        data: this.$qs.stringify({
          experienceId: id,
          page: page,
          size: 5,
        }),
      });
    },
    //展开|增加浏览量
    addView(id) {
      this.$axios({
        url: "/experience/selectDetailById",
        method: "get",
        params: {
          id,
          userId:
            this.$getStorage("userinfo") && this.$getStorage("userinfo").id,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.myexpList.forEach((item) => {
            if (item.id == res.data.id) {
              item.viewNum = res.data.viewNum;
            }
          });
        }
      });
    },
    //查询评论
    async selectRemark(id, page) {
      return await this.$axios({
        url: "/remark/select",
        method: "post",
        data: this.$qs.stringify({
          experienceId: id,
          page: page,
          size: 5,
        }),
      });
    },
    changemyexpList(obj, index) {
      console.log(obj);
      this.$set(this.myexpList, index, obj);
    },
    more() {
      this.$router.push("/main/experience");
    },
  },
};
</script>

<style lang="less" scoped>
.exp {
  background-color: #f2f7fb;

  & > div {
    width: 100%;
    margin: 0 auto;
  }
  .centop {
    padding: 20px 0;
    position: relative;
    text-align: left;
    span {
      margin-right: 20px;
      color: #9ba5bb;
      padding: 5px 0;
      cursor: pointer;
      line-height: 40px;
    }
    .acspan {
      text-align: left;
      font-weight: bold;
      color: #333;
      padding-left: 10px;
    }
    &::before {
      content: "";
      height: 25px;
      width: 2px;
      background-color: #9ba5bb;
      position: absolute;
      top: 27px;
    }
  }
  .btn {
    height: 40px;
    background-color: #312a6d;
    border-radius: 5px;
    color: #f2f7fb;
    line-height: 40px;
    font-size: 18px;
    i {
      margin-right: 5px;
    }
  }
}
.moreBtn {
  background-color: #9ba5bb;
  color: #ddd;
  width: 300px !important;
  height: 50px;
  border-radius: 10px;
  line-height: 50px;
  font-size: 20px;
  user-select: none;
  &:hover {
    color: white;
  }
}
</style>